<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style lang="">
       .outyuan{
            height: 500px;
            width: 500px;
            border-radius: 50%;
            /*background-color: grey;*/
            margin: 250px auto;
            border: 3px solid dodgerblue;  
            background-image: url(1.jpg); 
            background-size: cover;        
        }
        section{
            width: 70%;
            height: 100px;
            background-color: white;
            border: 2px solid dodgerblue;
            position: relative;           
            top: 220px;
            left: 79px;
        }
        #date{
            /*opacity: 0.3;*/
            width: 100%;
            height: 20px;
            font-size: 16px;
            font-family: "楷体";
            text-align: right;
            color:orchid;
            /*background-color: red;*/
        }
        #time{
            text-align: center;
            line-height: 80px;
            font-size: 60px;
        }
    </style>
</head>
<body>
    <div class="outyuan"> 
        <section>
            <div id="date">2017年01月15日 星期三</div>
            <div id="time"></div>
        </section>
    </div>
<script>
// var divEle=document.createElement("div")
// document.body.appendChild(divEle)
// var sectionEle=document.createElement("section")
// document.body.appendChild(sectionEle)
     var date = document.querySelector("#date");
    console.log(date);
function shijian() {
    var now = new Date();
    console.log(now);        
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();    
    second = second<10?"0"+second:second; 
    minute=minute<10?"0"+minute:minute; 
    hour=hour<10?"0"+hour:hour; 
    //Console.log("时："+hour+",  分："+minute+",  秒："+second);
    // 根据标签的id找到这个标签id="time"
    var time=document.querySelector("#time");
    time.innerHTML=hour+":"+minute+":"+second;
    console.log(time);
    
   
  // 获取当前的年月日
    var year=now.getFullYear();
    var month=now.getMonth() + 1;
    var day=now.getDate();
    var week=now.getDay();
    month=month<10?"0"+month:month; 
    day=day<10?"0"+day:day; 
    // 根据标签的id找到这个标签id="date"
    // charAt() 方法可返回指定位置的字符。
    
    date.innerHTML=year+"年"+month+"月"+day+"日  星期"+"日一二三四五六".charAt(week);   
    
    
}
shijian();
// 定时器（按照所给的时间周期，不停去做某件事）
// 方法名   时间周期（毫秒）
setInterval(shijian,1000);
// 执行方法






</script> 
    
</body>
</html>

